{include file="header.tpl"} {include file="selectArea.tpl"} {block name=body}
<style>
.my_link:hover{
    text-decoration:underline;
}
</style>
<script>
    function changeImage(e) {
        document.getElementById('image').src = e;
    }

	$(document).ready(function() {
		//To display the selected area
	 	 var selectedAreaName = sessionStorage.getItem("selectedAreaName");
	     document.getElementById("popId").text=selectedAreaName;
	   	//To display Login UserName
	     var selectedUserName = sessionStorage.getItem("selectedUserName");
	     document.getElementById("userNm").text=selectedUserName;
	});
</script>
	<div style="width: 926px; height:485px; margin-left:10%; margin-top:15px">
		{foreach $items as $item}
				{if $item.item_id eq $itemvar}
				{foreach $shop as $category}
					{if $item.item_category_id eq $category.category_id}
					<!-- image thumbnails -->
					<div style="float:left;" >
						<img name="data:image/jpeg;base64,{base64_encode($item.item_image)}"
						onmouseover="changeImage(this.name); this.style.border='1px solid black'" onmouseout="this.style.border=''" src="data:image/jpeg;base64,{base64_encode($item.item_image)}" 
						style="display: block; width: 48px; height: 64px;margin-bottom: 3px;cursor: pointer;"/>
						<img name="/Project001/phpFiles/images/6.jpg" 
						onmouseover="changeImage(this.name); this.style.border='1px solid black'" onmouseout="this.style.border=''" src="/Project001/phpFiles/images/6.jpg" 
						style="display: block; width: 48px; height: 64px;margin-bottom: 3px;cursor: pointer;"/>
						<img name="/Project001/phpFiles/images/3.jpg"
						onmouseover="changeImage(this.name); this.style.border='1px solid black'" onmouseout="this.style.border=''" src="/Project001/phpFiles/images/3.jpg" 
						style="display: block; width: 48px; height: 64px;margin-bottom: 3px;cursor: pointer;"/>
					</div>
					<!-- main image -->
					<div style="margin-left:10px; float:left; width: 375px; height:485px;">
						<img id="image" src="data:image/jpeg;base64,{base64_encode($item.item_image)}" style="width:350px; height:460px;">
					</div>
					<div style="height:485px;">
						<div style="margin-top: 20px; margin-left: 450px;font-size:23px; font-weight: 500; font-family:arial;">{$item.item_name}</div>
						<div style="margin-top: 1px; margin-left: 450px;">
							<a id=myDiv class="my_link" style="font-family:arial; font-size:12px; color:#9fa8ab;" href="#item-description">View Item Description</a>
							<span style="color:#9fa8ab;">|</span>
							{foreach $companyList as $company}
							{if $company.company_id eq $item.item_company_id}
							<a class="my_link" style="font-family:arial; font-size:12px; color:#9fa8ab;" href="">{$company.company_name} Products</a>
							{/if}
							{/foreach}
						</div>		
						
						{if $cookieValDisp=="wholesale"}
						{foreach $wholesaleList as $wholeVal}
							<div style="margin-top: 20px; margin-left: 450px; font-size:23px; font-weight: 500; font-family:arial;">Buy {$wholeVal.whole_item_quantity} Kgs for</div>
							<div style="margin-top: 20px; margin-left: 450px; font-size:23px; font-weight: 500; font-family:arial;">Rs {$wholeVal.wholesale_price}</div>	
						{/foreach}
						{else}
						<div style="margin-top: 20px; margin-left: 450px; font-size:23px; font-weight: 500; font-family:arial;">Rs. {$item.item_retail_price}</div>		
						{/if}
						
						 <div style="position: absolute; margin-top: 20px; height: 50px; width: 170px;  margin-left: 450px;">
                 			<a style="text-align:center; position: absolute; top: 0; right:0; bottom:0; left:0; background-color:orange;" href="/Project001/phpFiles/index.php?Type={$item.item_id}">
                    		<span class="label"  style="margin-top: 14px;">Add to Cart</span>
                			</a>
						 </div>		
					</div>
					{/if}
				{/foreach}
				{/if}
			{/foreach}
	</div>
	<div id="item-description" style="width: 926px; height:250px; margin-left:10%; margin-top:15px">
		<h2 style="font-weight: 500; font-family:arial; font-size:17px; color: #666; padding-bottom: 5px; text-transform: uppercase;">Product Details</h2>
		<div style="margin-left:2%;">
			<p style="font-family:arial; font-size:14px; color: #666;">Category Name: {$category.category_name}</p>
			<p style="font-family:arial; font-size:14px; color: #666;">Category Description:  {$category.category_description}</p>
			<p style="font-family:arial; font-size:14px; color: #666;">Company Name: {$company.company_name}</p>
			<p style="font-family:arial; font-size:14px; color: #666;">Item Description: {$item.item_description}</p>
		</div>
	</div>
{/block} 
{include file="footer.tpl"}
